<template>
    <div class="pay">
        <div class="pay_one" v-if="pay">
            <div class="money">
            支付总金额：  <span>￥ {{pay.price}}</span>
            </div>
            <div class="payment">
                <div class="text"><span>110</span><span :class="{ gree:payStatus=='支付完成', span:payStatus=='订单未支付' }">！  {{payStatus}}</span></div>
                <div class="payment_two">
                    <div class="payment_pay">
                        <canvas ref="canvas"></canvas>
                    </div>
                    <div class="img">
                        <img src="http://157.122.54.189:9093/images/wx-sweep2.jpg" alt="">
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
    data(){
        return {
            pay:null,
            payStatus: '',
        }
    },
    mounted() {
        // 通过定时器来获取token，因为vueX在内部处理需要一定时间
        setTimeout(() => {
            if(this.$store.state.user.userInfo.token){
                console.log(this.$store.state.user.userInfo.token);
                console.log(this.$route.query.id);
                this.$axios.get('/airorders/'+ this.$route.query.id,{
                    headers:{
                        Authorization: 'Bearer ' + this.$store.state.user.userInfo.token
                    }
                }).then(res=>{
                    console.log(res);
                    this.pay = res.data

                    // const canvas = this.$refs.canvas
                    // console.log(canvas);  // 获取到undefined
                    //  $nextTick  dom元素发生改变时执行
                    this.$nextTick(function(){

                        const canvas = this.$refs.canvas
                        console.log(canvas);
                        console.log(this.pay.payInfo.code_url);
                        QRCode.toCanvas(canvas,this.pay.payInfo.code_url,{width:300}, (error)=> {
                            if (error){
                                console.error(error)
                                return
                            } 
                            console.log('success!');
                            
                            this.stateOfPayment()
                        }) 

                    })

                })
            }else {
                this.mounted()
            }
        }, 100);
    },
    methods: {
        // 支付状态
        stateOfPayment () {
            const {id} = this.$route.query
            let {nonce_str,order_no} = this.pay.payInfo
            //console.log(id,nonce_str,order_no);
            this.$axios.post('/airorders/checkpay',{id,nonce_str:nonce_str,out_trade_no:order_no},{
                headers:{
                    Authorization: 'Bearer ' + this.$store.state.user.userInfo.token
                }
            }).then(res=>{
                console.log(res);
                this.payStatus = res.data.statusTxt
                if(res.data.trade_state === "NOTPAY"){
                    setTimeout(()=>{
                        this.stateOfPayment()
                    },1000)
                }else if(res.data.trade_state === "SUCCESS"){
                    this.$message({message:'支付成功',type:'success'})
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.gree {
    color: green;
}
.span {
    color: red;
}
.pay {
    width: 100%;
    background: #f5f5f5;
    .pay_one {
        width: 1000px;
        margin: auto;
        .money {
            padding: 10px 0;
            font-size: 28px;
            text-align: right;
            
        }
        .payment {
            width: 100%;
            height: 600px;
            border-top: 6px #ffa500 solid;
            background: #ffffff;
            .text {
                padding: 20px;
                display: flex;
                justify-content: space-between;
            }

            .payment_two {
                display: flex;
                .payment_pay {
                    flex: 1;
                    padding: 20px;
                }
                .img {
                    flex: 1;
                    padding: 40px;
                    img{
                        max-width: 100%;
                    }
                }
            }
        }
    }
}
</style>